<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        body{
            font:20px microsoft yahei;
        }
        form{
            width: 500px;
            margin:0 auto;
        }
        input{
            margin:10px 0;
        }
        input[type="text"]{
            width: 300px;
            height: 40px;
            font:16px/40px "simsun";
        }
        input[type="reset"]{
            width: 80px;
            height: 40px;
            font:16px/40px "simsun";
        }
    </style>
</head>
<body>
<form action="" id="oForm">
    姓名： <input type="text"><br>
    性别： 男： <input type="radio">  女：<input type="radio"><br>
    爱好： 打球<input type="checkbox"> 看电影<input type="checkbox"> 学习<input type="checkbox"><br>
    <input type="reset" value="重置" name="res">
</form>
<script>
    var oForm=document.getElementById("oForm");
    oForm.onreset=function(){
            return confirm("确认重置吗？");
    }
</script>
</body>
</html>